<!DOCTYPE html>
<html>
<head>
    <title>材质的纹理贴图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.min.js"></script>
    <script>
        function init(){
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();

            var camera = new THREE.OrthographicCamera(-5,5,3.75,-3.75,0.1,100);
            camera.position.set(25,25,25);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);

            //光源
            var light = new THREE.PointLight(0xfffff,1,100);
            light.position.set(10,15,5);
            scene.add(light);

            //导入纹理
            /*var texture = THREE.ImageUtils.loadTexture("../img/1.png",{},function(){
                renderer.render(scene,camera);
            });

            var material = new THREE.MeshLambertMaterial({
                map:texture
            });

            var cube = new THREE.Mesh(new THREE.CubeGeometry(3,3,3),material);
            scene.add(cube);*/
            /*var sphere = new THREE.Mesh(new THREE.SphereGeometry(3,100,100),material);
             scene.add(sphere);*/

            //六面各不相同的贴图
            var material = [];
            for(var i=1;i<=6;i++){
                material.push(new THREE.MeshBasicMaterial({
                    map:THREE.ImageUtils.loadTexture("../img/"+i+".png",{},
                    function(){
                        renderer.render(scene,camera);
                    })
                }));
            }

            var cube = new THREE.Mesh(new THREE.CubeGeometry(3,3,3),
                new THREE.MeshFaceMaterial(material));
            scene.add(cube);


            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" style="width: 800px;height: 600px;"></canvas>
</body>
</html>